// 渲染NavBar组件
import { NavBar } from "antd-mobile";
// 导入组件样式
import "./NavHeader.module.less"
// 导入withRouter高阶组件
import { withRouter } from "react-router-dom";
// 导入propTypes
import PropTypes from "prop-types";
/*
  注意：默认情况下，只有路由Route直接渲染的组件才能够获取路由信息（比如history.go()等）
  如果需要在其他组件中获取到路由信息可以通过withRouter高阶组件来获取。

  1. 从react-router-dom 中 导入withRouter高阶组件
  2. 使用withRouter高阶组件包装NavHeader组件。目的是包装后就可以在组件中获取到当前路由信息了
  3. 从props中结构出history对象
  4. 调用history.go()实现返回上一页功能
  5. 从props中解构出onLeftClick函数，实现自定义<按钮的点击事件。
* */
function NavHeader (props) {
  return (
    /*NavBar导航栏组件：
      mode：主题色  icon:出现在最左边的图标占位符 onLeftClick：左侧图标的点击事件 rightContent:导航栏右边的内容
      */
    <NavBar
      className={"navbar"}
      mode="light"
      icon={<i className={"iconfont icon-back"} />}
      // 默认点击返回上一级路由，如果在NavHeader组件中给onLeftClick设置了点击事件，则执行设置的点击事件
      onLeftClick={ props.onLeftClick || (() => props.history.go(-1))}

      rightContent={[]}
    >
      {props.children}
    </NavBar>
  );
}

NavHeader.propTypes = {
  children : PropTypes.string.isRequired, // 字符串，必选
  onLeftClick:PropTypes.func // 函数类型
}
export default withRouter(NavHeader);
